import React, { useEffect } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';

const AMapExample = () => {
    useEffect(() => {
        AMapLoader.load({
            "key": "a7c01561d7a5f5f31b8af872d94f5c32",   // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": []  //插件列表
        }).then((AMap) => {
            let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的id
                zoom: 15, //初始化地图层级
                center: [123.449715, 41.714914],//初始化地图中心点
            });
            // 标记
            let icon = new AMap.Icon({
                size: new AMap.Size(65, 65),    // 图标尺寸
                image: 'https://z1.muscache.cn/airbnb/static/packages/assets/frontend/gp-stays-china-pdp-sections/constants/home_pin.fb50ae56482cbdcc4405f8f4cbc14cd3.png',  // Icon的图像
                imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(65,65)   // 根据所设置的大小拉伸或压缩图片
            });

            let marker = new AMap.Marker({
                position: [123.449715, 41.714914] ,// 基点位置
                icon:icon
            });
            // 地图添加标记
            amap.add(marker);
        }).catch(e => {
            console.log(e);
        })


    }, []);

    return (
        <div id="mapContainer" style={{ width: '100%', height: '280px' }}></div>
    );
};

export default AMapExample;
